import React, { Component } from 'react';
import { connect } from 'dva';
import { Card } from 'antd';
import moment from 'moment';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import DescriptionList from '../../../components/DescriptionList';

const { Description } = DescriptionList;

@connect(state => ({
  queryInfo: state.controllerplugin.queryInfo,
}))
export default class ControllerPluginDetails extends Component {
  componentDidMount() {
    const { dispatch, match } = this.props;
    const { params } = match;
    const { id } = params;
    dispatch({
      type: 'controllerplugin/query',
      payload: id,
    });
  }

  render() {
    const { queryInfo } = this.props;
    const { name } = queryInfo;

    return (
      <PageHeaderLayout title="Controller Plugin 信息">
        <Card bordered={false}>
          <DescriptionList size="large" col={2} title={name} style={{ marginBottom: 32 }}>
            <Description term="id">{queryInfo.id}</Description>
            <Description term="name">{queryInfo.name}</Description>
            <Description term="description">{queryInfo.description}</Description>
            <Description term="vendor">{queryInfo.vendor}</Description>
            <Description term="version">{queryInfo.version}</Description>
            <Description term="productName">{queryInfo.productName}</Description>
            <Description term="driverID">{queryInfo.driverID}</Description>
            <Description term="serviceList">{queryInfo.serviceList}</Description>
            <Description term="createTime">{moment(queryInfo.createTime).format('YYYY-MM-DD HH:mm:ss')}</Description>
            <Description term="updateTime">{moment(queryInfo.updateTime).format('YYYY-MM-DD HH:mm:ss')}</Description>
          </DescriptionList>
        </Card>
      </PageHeaderLayout>
    );
  }
}
